<html lang="en">
    <head>
        <title>风车</title>
        <meta charset="utf-8">
        <style>
            body{
                margin: 0;
            }
            div{
                /*设置元素高度*/
                height: 100%;
                /*设置背景颜色*/
                /*background-color: red;*/
                /*设置背景图片*/
                background-image: url("caodi.png");
                /*背景图片的尺寸*/
                background-size: 100% 100%;
            }
            /*创建动画*/
            @keyframes around{
                0%{
                    transform: rotate(0);
                }
                100%{
                    transform: rotate(360deg);
                }
            }

            img{
                height: 100px;
                width: 100px;
                position: absolute;
                /*动画名字*/
                animation-name: around;
                /*动画执行时间*/
                animation-duration: 1000ms;
                /*设置动画次数*/
                animation-iteration-count: infinite;
                /*设置动画执行速率*/
                animation-timing-function: linear;
            }
            /*第一个img*/
            img:nth-of-type(1){
                height: 300px;
                width: 300px;
                left: 26%;
                top: 30%;
                animation-duration: 1s;
            }

            img:nth-of-type(2){
                height: 100px;
                width: 100px;
                left: 932px;
                top: 660px;
            }

            img:nth-of-type(3){
                height: 200px;
                width: 200px;
                left: 1158px;
                top: 510px;
            }

            img:hover{
                animation-play-state: paused;
            }

        </style>
    </head>
    <body>
        <div>
            <img src="fengche.png">
            <img src="fengche.png">
            <img src="fengche.png">
        </div>
    </body>
</html>